<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="__PUBLIC__/imgs/default_80.jpg" type="image/jpg"sizes="20x16">
    <link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css">
    <link rel="stylesheet" href="__PUBLIC__/css/login.css">
    <style>body{background: #F7FAFC;overflow: hidden;background: #fff;}#canvas{display: inline-block;}</style>
    <title>知乎-与世界分享你的知识、经验和见解</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-5">
                <div class="col-md-12">
                    <div class="col-md-10 logo text-center">
                        <b>知乎</b>
                        <p>与世界分享你的知识、经验和见解</p>
                    </div>
                    <div id="login" class="col-md-3 col-md-offset-2 mt20 h3">
                        登录
                    </div>
                    <div id="reg" class="col-md-3 mt20 h3">
                        注册
                    </div>
                    <div>
                        <form action="<{:U('Login/login')}>" method="post">
                              <div class="form-group  col-md-10">
                                <input type="text" class="form-control" name="name" placeholder="姓名">
                              </div>
                              <div class="form-group  col-md-10">
                                <input type="password" class="form-control" name="pass" placeholder="密码">
                              </div>
                              <div class="form-group  col-md-4">
                                <input type="text" class="form-control" name="vcode" placeholder="">
                              </div>
                              <div class="col-md-6">
                                  <img src="<{:U('Login/vcode')}>" alt="点我刷新" class="img-responsive">
                              </div>
                              <div class="form-group col-md-10">
                                  <input type="submit" class="btn btn-primary col-md-12" value="登 录">
                              </div>
                        </form>
                    </div>
                    <div>
                        <form action="<{:U('Login/reg')}>" method="post" onsubmit="return checkForm()">
                              <div class="form-group  col-md-10">
                                <input type="text" class="form-control" name="name" placeholder="姓名">
                              </div>
                              <div class="col-md-2"></div>
                              <div class="form-group  col-md-10">
                                <input type="tel" class="form-control" name="tel" placeholder="手机号">
                              </div>
                              <div class="col-md-2"></div>
                              <div class="form-group  col-md-10">
                                <input type="password" class="form-control" name="pass" placeholder="密码(6-32位)">
                              </div>
                              <div class="col-md-2"></div>
                              <div class="form-group  col-md-4">
                                <input type="text" class="form-control" name="vcode" placeholder="">
                              </div>
                              <div class="col-md-6">
                                  <img src="<{:U('Login/vcode')}>" alt="点我刷新" class="img-responsive">
                              </div>
                              <div class="form-group col-md-10">
                                  <input type="submit" class="btn btn-primary col-md-12" value="注 册">
                              </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2 col-md-offset-6 text-right btn-link"data-toggle="modal" data-target="#headModal">
                找回密码
            </div>
        </div>
    </div>
        <!-- Modal -->
    <div class="modal fade" id="headModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="关闭"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改密码</h4>
                </div>
                <form action="<{:U('Login/repass')}>" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="col-md-12 mt10">
                            <div class="col-md-6 col-md-offset-2">
                                <input type="text" name="name" class="form-control" placeholder="姓名">
                            </div>
                        </div>
                        <div class="col-md-12 mt10">
                            <div class="col-md-6 col-md-offset-2">
                                <input type="text" name="tel" class="form-control" placeholder="手机号">
                            </div>
                        </div>
                        <div class="col-md-12 mt10">
                            <div class="col-md-6 col-md-offset-2">
                                <input type="password" name="pass" class="form-control" placeholder="新密码(6-32位)">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer mt20">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">确认提交</button>
                    </div>
                </form>
            </div>
        </div>

    </div>

    <canvas id="canvas"></canvas>
    <script>
        //定义画布宽高和生成点的个数
        var WIDTH = window.innerWidth, HEIGHT = window.innerHeight, POINT = 35;
        
        var canvas = document.getElementById('canvas');
        canvas.width = WIDTH,
        canvas.height = HEIGHT;
        var context = canvas.getContext('2d');
        context.strokeStyle = 'rgba(0,0,0,0.02)',
        context.strokeWidth = 1,
        context.fillStyle = 'rgba(0,0,0,0.05)';
        var circleArr = [];

        //线条：开始xy坐标，结束xy坐标，线条透明度
        function Line (x, y, _x, _y, o) {
            this.beginX = x,
            this.beginY = y,
            this.closeX = _x,
            this.closeY = _y,
            this.o = o;
        }
        //点：圆心xy坐标，半径，每帧移动xy的距离
        function Circle (x, y, r, moveX, moveY) {
            this.x = x,
            this.y = y,
            this.r = r,
            this.moveX = moveX,
            this.moveY = moveY;
        }
        //生成max和min之间的随机数
        function num (max, _min) {
            var min = arguments[1] || 0;
            return Math.floor(Math.random()*(max-min+1)+min);
        }
        // 绘制原点
        function drawCricle (cxt, x, y, r, moveX, moveY) {
            var circle = new Circle(x, y, r, moveX, moveY)
            cxt.beginPath()
            cxt.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI)
            cxt.closePath()
            cxt.fill();
            return circle;
        }
        //绘制线条
        function drawLine (cxt, x, y, _x, _y, o) {
            var line = new Line(x, y, _x, _y, o)
            cxt.beginPath()
            cxt.strokeStyle = 'rgba(0,0,0,'+ o +')'
            cxt.moveTo(line.beginX, line.beginY)
            cxt.lineTo(line.closeX, line.closeY)
            cxt.closePath()
            cxt.stroke();

        }
        //初始化生成原点
        function init () {
            circleArr = [];
            for (var i = 0; i < POINT; i++) {
                circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10)/40, num(10, -10)/40));
            }
            draw();
        }

        //每帧绘制
        function draw () {
            context.clearRect(0,0,canvas.width, canvas.height);
            for (var i = 0; i < POINT; i++) {
                drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r);
            }
            for (var i = 0; i < POINT; i++) {
                for (var j = 0; j < POINT; j++) {
                    if (i + j < POINT) {
                        var A = Math.abs(circleArr[i+j].x - circleArr[i].x),
                            B = Math.abs(circleArr[i+j].y - circleArr[i].y);
                        var lineLength = Math.sqrt(A*A + B*B);
                        var C = 1/lineLength*7-0.009;
                        var lineOpacity = C > 0.03 ? 0.03 : C;
                        if (lineOpacity > 0) {
                            drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i+j].x, circleArr[i+j].y, lineOpacity);
                        }
                    }
                }
            }
        }

        //调用执行
        window.onload = function () {
            init();
            setInterval(function () {
                for (var i = 0; i < POINT; i++) {
                    var cir = circleArr[i];
                    cir.x += cir.moveX;
                    cir.y += cir.moveY;
                    if (cir.x > WIDTH) cir.x = 0;
                    else if (cir.x < 0) cir.x = WIDTH;
                    if (cir.y > HEIGHT) cir.y = 0;
                    else if (cir.y < 0) cir.y = HEIGHT;
                    
                }
                draw();
            }, 8);
        }

    </script>
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <script src="__PUBLIC__/js/bootstrap.min.js"></script>
    <script>
    $('.btn-link').attr('style','cursor:pointer;');
    $("#reg").nextAll().eq(0).children('form').find("input[name='name']").focus();
    $("#reg").nextAll().eq(1).children('form').find("input[name='name']").blur(function(){
        if ($(this).val().length < 3 || $(this).val().length > 32) {
            $(this).parent().next('div').attr({style:"font-size:22px;color:red"});
            $(this).parent().next('div').text('×');
        } else {
            $(this).parent().next('div').attr({style:"font-size:22px;color:red"});
            $(this).parent().next('div').text('√');
        };
    });

    $("#reg").nextAll().eq(1).children('form').find("input[name='tel']").blur(function(){
        if ($(this).val().match(/^1[3|4|5|7|8]\d{9}$/) == null) {
            $(this).parent().next('div').attr({style:"font-size:22px;color:red"});
            $(this).parent().next('div').text('×');
        } else {
            $(this).parent().next('div').attr({style:"font-size:22px;color:red"});
            $(this).parent().next('div').text('√');
        };
    });

    $("#reg").nextAll().eq(1).children('form').find("input[name='pass']").blur(function(){
        if ($(this).val().length < 6 || $(this).val().length > 32) {
            $(this).parent().next('div').attr({style:"font-size:22px;color:red"});
            $(this).parent().next('div').text('×');
        } else {
            $(this).parent().next('div').attr({style:"font-size:22px;color:red"});
            $(this).parent().next('div').text('√');
        };
    });

    $("form div>img,#reg,#login").attr('style','cursor:pointer');
    $("form div>img").click(function(){
        $(this).attr('src','<{:U('Login/vcode')}>');
    });

    function checkForm()
    {
        if ($("#reg").nextAll().eq(1).children('form').find("input[name='name']").parent().next('div').html() == '×' || $("#reg").nextAll().eq(1).children('form').find("input[name='tel']").parent().next('div').html() == '×' || $("#reg").nextAll().eq(1).children('form').find("input[name='pass']").parent().next('div').html() == '×') {
            alert('亲!有错误哦!!!');
            return false;
        };
    }

    $('#reg').nextAll(':eq(1)').attr('style','display:none');
    $('#reg').nextAll(':eq(0)').attr('style','display:block');
    $('#reg').click(function(){
        $('form div>img').attr('src','<{:U('Login/vcode')}>')
        $(this).nextAll(':eq(0)').attr('style','display:none');
        $(this).nextAll(':eq(1)').attr('style','display:block');
    });
    $('#login').click(function(){
        $('form div>img').attr('src','<{:U('Login/vcode')}>')
        $(this).nextAll(':eq(1)').attr('style','display:block');
        $(this).nextAll(':eq(2)').attr('style','display:none');
    });

    </script>
</body>
</html>